/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/28
 * Email：ibelieve1210@163.com
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Image,
} from 'react-native';
export default class MineHeaderView extends Component {

    static defaultProps = {
        userCoverUri: '',
        userName: '',
        userLevelIconUri: '',
        shopCardCnt: 0,
        commentsCnt: 0,
        collectionCnt: 0,
    };

    render() {
        return (
            <View style={styles.headerLayoutStyle}>
                {this.renderTopView()}
                {this.renderBottomView()}
            </View>
        );
    }

    renderBottomView() {
        return <View style={styles.headerContentBottomStyle}>
            <BottomItemView
                topText={this.props.shopCardCnt}
                bottomText="优惠券"
            />
            <View style={styles.bottomViewDivider}/>

            <BottomItemView
                topText={this.props.commentsCnt}
                bottomText="评价"
            />
            <View style={styles.bottomViewDivider}/>

            <BottomItemView
                topText={this.props.collectionCnt}
                bottomText="收藏"
            />
        </View>
    }

    renderTopView() {
        return <View style={styles.headerContentTopStyle}>
            <View style={styles.contentLeftStyle}>
                <Image
                    source={{uri: this.props.userCoverUri}}
                    style={styles.leftUserCoverStyle}
                />
                <Text style={styles.userNameStyle}>{this.props.userName}</Text>
                <Image
                    source={{uri: this.props.userLevelIconUri}}
                    style={styles.leftUserLevelStyle}
                />
            </View>
            <Image
                source={{uri: 'icon_cell_rightarrow'}}
                style={styles.rightArrowStyle}
            />
        </View>;
    }
}

class BottomItemView extends Component {

    static defaultProps = {
        topText: 0,
        bottomText: '',
    };

    render() {
        return (
            <View style={styles.bottomViewItemStyle}>
                <Text style={styles.bottomViewTopTextStyle}>{this.props.topText}</Text>
                <Text style={styles.bottomViewBottomTextStyle}>{this.props.bottomText}</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    headerLayoutStyle: {
        backgroundColor: '#ff639b',
    },

    headerContentTopStyle: {
        marginTop: Platform.OS === 'ios' ? 342 : 20,//完成iOS粘性效果(20+22+300)
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginHorizontal: 10,
        marginBottom: 10,
    },

    contentLeftStyle: {
        flexDirection: 'row',
        alignItems: 'center',
    },

    leftUserCoverStyle: {
        width: 60,
        height: 60,
        borderRadius: 30,
        borderWidth: 4,
        borderColor: '#ff639baa'
    },

    userNameStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#fff',
        marginHorizontal: 4,
    },

    leftUserLevelStyle: {
        width: 15,
        height: 15,
        borderRadius: 7.5,
    },

    headerContentBottomStyle: {
        backgroundColor: '#ffffff33',
        flexDirection: 'row',
        paddingVertical: 7,
        paddingHorizontal: 10,
    },

    bottomViewItemStyle: {
        flex: 1,
        alignItems: 'center',
    },

    bottomViewDivider: {
        width: 1,
        backgroundColor: '#fff',
    },

    bottomViewTopTextStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 3,
    },

    bottomViewBottomTextStyle: {
        fontSize: 13,
        color: '#fff',
    },

    rightArrowStyle: {
        width: 8,
        height: 13,
        marginLeft: 7,
    },
});